<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>_ToggleButtonMixin tests</title>

	<style type="text/css">
		@import "../../themes/claro/document.css";
		@import "../../themes/dijit.css";

		#table {
			margin: 0;
			padding: 2px;
		}
		#table, .dijit, BUTTON {
			font-family: monospace;
			font-size: 12pt;
		}
		#table .layout {
			padding: 2px;
			font-size: 100%;
			margin: 0;
		}
		.mblRedButtonChecked {
			border-style: inset;
		}
	</style>
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="parseOnLoad: true, isDebug: true"></script>

	<script type="text/javascript">
		dojo.require("doh.runner");
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.form.ToggleButton");
		dojo.require("dojox.mobile.ToggleButton");

		dojo.ready(function(){

			doh.register("attributes", [
				{
					name: "dijit",
					runTest: function(){
						var dijit_attributes = dijit.byId('dijit_attributes');
						doh.t(dijit_attributes.get('checked'), "dijit original get('checked')");
						doh.t(dojo.hasClass(dijit_attributes.domNode, dijit_attributes.baseClass+"Checked"), "dijit baseClass checked");
						dijit_attributes.set('checked', false);
						doh.f(dijit_attributes.get('checked'), "dijit get('checked')");
						doh.f(dojo.hasClass(dijit_attributes.domNode, dijit_attributes.baseClass+"Checked"), "dijit baseClass not checked");
						doh.t(dojo.hasClass(dijit_attributes.domNode, dijit_attributes.baseClass), "dijit baseClass");
						doh.t(dojo.hasClass(dijit_attributes.domNode, "mblRedButton"), "dijit original class");
					}
	 			},
				{
					name: "mobile",
					runTest: function(){
						var mobile_attributes = dijit.byId('mobile_attributes');
						doh.t(mobile_attributes.get('checked'), "mobile original get('checked')");
						doh.t(dojo.hasClass(mobile_attributes.domNode, mobile_attributes.baseClass+"Checked"), "mobile baseClass checked");
						mobile_attributes.set('checked', false);
						doh.f(mobile_attributes.get('checked'), "mobile get('checked')");
						doh.f(dojo.hasClass(mobile_attributes.domNode, mobile_attributes.baseClass+"Checked"), "mobile baseClass not checked");
						doh.t(dojo.hasClass(mobile_attributes.domNode, mobile_attributes.baseClass), "mobile baseClass");
						doh.t(dojo.hasClass(mobile_attributes.domNode, "mblRedButton"), "mobile original class");
					}
	 			}
			]);

			doh.register("events", [
				{
					name: "dijit",
					timeout: 2000,
					runTest: function(){
						var
							d = new doh.Deferred(),
							dijit_events = dijit.byId('dijit_events'),
							calledOnClick = false,
							nop = function(){ return false; };

						function onChange(v){
							dijit_events.set('onChange', nop);
							d.callback(true);
						}
						dijit_events.set('onChange', onChange);
						dijit_events._onClick({
							preventDefault: nop,
							stopPropagation: nop
						});

						return d;
					}
	 			},
				{
					name: "mobile",
					timeout: 2000,
					runTest: function(){
						var
							d = new doh.Deferred(),
							mobile_events = dijit.byId('mobile_events'),
							nop = function(){ return false; };

						function onChange(){
							mobile_events.set('onChange', nop);
							d.callback(true);
						}
						mobile_events.set("onChange", onChange);
						setTimeout(function(){
							mobile_events.focusNode.click({
								preventDefault: nop,
								stopPropagation: nop
							});
						}, 0);

						return d;
					}
	 			}
			]);

			doh.register("programmatic", [
				{
					name: "dijit",
					timeout: 2000,
					runTest: function(){
						new dijit.form.ToggleButton({id:"dijit_programmatic", type:"button", checked:true, label:"No srcNodeRef", "aria-label":"dijit_programmatic"}).placeAt("dijit_programmatic_container", "first");
						var dijit_programmatic = dijit.byId('dijit_programmatic');
						var pos = dojo.position(dijit_programmatic.domNode, true);
						doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'dijit position');
						doh.t(dijit_programmatic.get('checked'), 'dijit widget checked');
					}
	 			},
				{
					name: "mobile",
					timeout: 2000,
					runTest: function(){
						new dojox.mobile.ToggleButton({id:"mobile_programmatic", type:"button", checked:true, label:"No srcNodeRef", "aria-label":"mobile_programmatic"}).placeAt("mobile_programmatic_container", "first");
						var mobile_programmatic = dijit.byId('mobile_programmatic');
						var pos = dojo.position(mobile_programmatic.domNode, true);
						doh.t(pos.w > 0 && pos.h > 0 && pos.x > 0 && pos.y > 0, 'mobile position');
						doh.t(mobile_programmatic.get('checked'), 'mobile widget checked');
					}
	 			}
			]);

			doh.run();
		});
	</script>
</head>
<body class="claro" role="main">
	<h1 class="testTitle">_ToggleButtonMixin (dijit and mobile) non-robot tests</h1>

	<table id="table">
		<tr>
			<th class="layout">&nbsp;</th>
			<th class="layout">dijit</th>
			<th class="layout">mobile</th>
		</tr>
		<tr>
			<td class="layout">attributes</td>
			<td class="layout"><input id="dijit_attributes" data-dojo-type="dijit/form/ToggleButton" data-dojo-props='type:"button", checked: true, label:"original", "class":"mblRedButton"'/></td>
			<td class="layout"><button type="button" class="mblRedButton" checked id="mobile_attributes" dojoType="dojox.mobile.ToggleButton" label="original"/></td>
		</tr>
		<tr>
		<tr>
			<td class="layout">Events</td>
			<td class="layout"><button id="dijit_events" data-dojo-type="dijit/form/ToggleButton" data-dojo-props='type:"button", onClick:function(){ return true; }'>innerHTML</button></td>
			<td class="layout"><button type="button" id="mobile_events" data-dojo-type="dojox.mobile.ToggleButton" data-dojo-props='type:"button", onClick:function(){ return true; }'>innerHTML</button></td>
		</tr>
		<tr>
			<td class="layout">Programmatic</td>
			<td class="layout" id="dijit_programmatic_container"></td>
			<td class="layout" id="mobile_programmatic_container"></td>
		</tr>
	</table>
</body>
</html>
